var createValidation = null;
//全局vue对象
var detailVUE = null;
var createForm = "#createProjectForm";
var updateFrom = "#updateProjectForm";
var url_Delete = "/project/delete/";
var url_createProjectPage = "/project/create.html";
var url_create = "/project/create";
var url_updatePage = "/project/update";

$(function () {
    detailVUE = new Vue({
        el: '#groupPanel',
        data: {
            groupId: gid,
            canEdit: false,
            users: [],
            projects: []
        },
        methods: {
            createProject: function (id) {
                createProjectAction(id);
            },
            editProject: function (id) {
                updateProjectAction(id)
            },
            openProject: function (id) {
                window.location.href = "/project/" + id + ".html";
            },
            delProject: function (id) {
                deleteAction(id);
            },
            chooseUser:function(gid){
                chooseUserAction(gid);
            },
            delUser:function(uid,gid){
                deleUserAction(uid,gid);
            }
        },
        created: function () {
            var _this = this;
            $.getJSON(URI_groupUserAndProject, {}, function (resp) {
                if (resp.code != "0000") {
                    showMessage(resp.code || resp.desc, "error");
                } else {
                    _this.projects = resp.data.projects;
                    _this.canEdit = resp.data.canEdit;
                    _this.users = resp.data.users;
                }
            })
        }
    });
})

function initValidate(formId) {
    var validator = $(formId).validate({
        rules: {
            groupName: {required: true, maxlength: 100},
            groupDesc: {required: true, maxlength: 100}
        }
    });
    return validator;
}

function createProjectAction(id) {
    loadDialog("#AllModal", "新增", url_createProjectPage + "?gid=" + id, function () {
        createValidation = initValidate(createForm)
        $(createForm).ajaxForm({
            target: '#btn-app-submit',   // target element(s) to be updated with server response
            dataType: 'json',
            url: url_create,
            beforeSubmit: function (formData, jqForm, options) {
                return createValidation.valid();
            },
            success: function (result, statusText, xhr, $form) {
                if (result.code != "0000") {
                    showMessage(result.code || result.desc, "error");
                } else {
                    $("#AllModal").modal("hide");
                    detailVUE.projects.push(result.data);
                }
            }
        });
    })
}

function updateProjectAction(id) {
    loadDialog("#AllModal", "修改", url_updatePage + "/" + id + ".html", function () {
        updateValidation = initValidate(updateFrom)
        $(updateFrom).ajaxForm({
            target: '#btn-app-update',   // target element(s) to be updated with server response
            dataType: 'json',
            url: url_updatePage + "/" + id,
            beforeSubmit: function (formData, jqForm, options) {
                return updateValidation.valid();
            },
            success: function (result, statusText, xhr, $form) {
                if (result.code != "0000") {
                    showMessage(result.code || result.desc, "error");
                } else {
                    $("#AllModal").modal("hide");
                    for (var i = 0; i < detailVUE.projects.length; i++) {
                        if (detailVUE.projects[i].appId == id) {
                            detailVUE.projects.splice(i, 1, result.data);
                            break;
                        }
                    }
                    showMessage(result.desc)
                }
            }
        });
    })
}

function deleteAction(id) {
    var deleteDialog = $.confirm({
        type: 'red',
        animationSpeed: 300,
        title: false,
        content: '确认删除该记录吗？',
        buttons: {
            confirm: {
                text: '确认',
                btnClass: 'waves-effect waves-button',
                action: function () {
                    $.ajax({
                        type: 'post',
                        url: url_Delete + id,
                        success: function (result) {
                            if (result.code != "0000") {
                                showMessage(result.code || result.desc, "error");
                            } else {
                                deleteDialog.close();
                                showMessage("删除成功");
                                for (var i = 0; i < detailVUE.projects.length; i++) {
                                    if (detailVUE.projects[i].appId == id) {
                                        detailVUE.projects.splice(i, 1)
                                        break;
                                    }
                                }
                            }
                        }
                    });
                }
            },
            cancel: {
                text: '取消',
                btnClass: 'waves-effect waves-button'
            }
        }
    });
}
var addGroupUserForm="#createGroupUserForm";
var addGroupUserURL="/group/addUser";
function initValidateUser(){
    var validator = $(addGroupUserForm).validate({
        rules: {
            user:{required: true, maxlength: 100,remote: "/group/checkUser"}
        }
    });
    return validator;
}
function chooseUserAction(gid){
    loadDialog("#AllModal","添加用户","/group/"+gid+"/addUser.html",function(){
        var groupUserValidation = initValidateUser()
        $(addGroupUserForm).ajaxForm({
            target: '#btn-GroupUser-submit',   // target element(s) to be updated with server response
            dataType: 'json',
            url: addGroupUserURL,
            beforeSubmit: function (formData, jqForm, options) {
                return groupUserValidation.valid();
            },
            success: function (result, statusText, xhr, $form) {
                if (result.code != "0000") {
                    showMessage(result.code || result.desc, "error");
                } else {
                    $("#AllModal").modal("hide");
                    showMessage("创建成功");
                    detailVUE.users.push(result.data);
                }
            }
        });
    })
}
var delGroupUserURL="/group/removeUser"
function deleUserAction(uid,gid){
    var deleteDialog = $.confirm({
        type: 'red',
        animationSpeed: 300,
        title: false,
        content: '是否从该组中移除此用户？',
        buttons: {
            confirm: {
                text: '确认',
                btnClass: 'waves-effect waves-button',
                action: function () {
                    $.ajax({
                        type: 'post',
                        url:delGroupUserURL,
                        data:{"uid":uid,"gid":gid},
                        success: function (result) {
                            if (result.code != "0000") {
                                showMessage(result.code || result.desc, "error");
                            } else {
                                deleteDialog.close();
                                showMessage("删除成功");
                                for(var i=0;i<detailVUE.users.length;i++){
                                    if(detailVUE.users[i].uid == uid){
                                        detailVUE.users.splice(i,1)
                                        break;
                                    }
                                }
                            }
                        }
                    });
                }
            },
            cancel: {
                text: '取消',
                btnClass: 'waves-effect waves-button'
            }
        }
    });
}

function loadDialog(selectEL, title, loadURI, success) {
    $(selectEL).find(".modal-title").html(title);
    $(selectEL).find('.modal-body').load(loadURI, function (response, status, xhr) {
        $(selectEL).modal("show");
        success();
    });
}